<template>
	<view class="pageBg">
		<safearea></safearea>
		<view class="content">
			<!-- 第一行 -->
			<view class="row welcome">您累计参与测评102天，感谢您的参与！</view>

			<!-- 第二行 -->
			<view class="row row-small">
				<text class="title">测评分类</text>
				<text class="title-t">Evaluation</text>
			</view>

			<!-- 第三行（横向滚动） -->
			<scroll-view class="row row-large" scroll-x="true" show-scrollbar="false">
				<view class="scroll-content">
					<view class="item" v-for="(item, index) in evaluationList" :key="index">
						<image src="/static/logo.png" class="img" mode="aspectFit"></image>
						<text class="item-title-s">{{ item }}</text>
					</view>
				</view>
			</scroll-view>
			<view class="tips">本软件涉及成人内容 未满18岁请勿进入</view>
			<!-- 第四行 -->
			<view class="row row-small">
				<text class="title">器具分类</text>
				<text class="title-t">Classification</text>
			</view>

			<!-- 第五行（高度自动填充，改为单列） -->
			<view class="row-auto">
				<view class="item-box" v-for="(item, index) in List" :key="index">
					<view class="item-image">
						<image src="/common/images/ex.jpg" class="banner" mode="aspectFill"></image>
						<!-- 左上角的标题 -->
						<text class="item-title">{{ item }}</text>
						<!-- 底部蒙版文字 -->
						<view class="text-overlay">
							<text class="item-text">{{ content[index] }}</text>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				evaluationList: ["女用测评", "男用测评", "调情助兴", "情趣内衣", "内容5", "内容6"],
				List: ["器具一", "器具二"],
				content: ["器具一说明", "器具二说明"]
			};
		},
	};
</script>

<style lang="scss">
	@import "@/common/style/base-style.scss";

	.page-bg {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.content {
		display: flex;
		flex-direction: column;
	}

	.tips {
		font-size: 13px;
		text-align: center;
		padding: 5px;
	}

	/* 通用标题样式 */
	.title {
		color: $text-font-color-1;
		font-size: 40rpx;
	}

	.title-t {
		color: $text-font-color-2;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	/* 每一行的通用样式 */
	.row {
		width: 100%;
		font-size: 28rpx;
	}

	/* 第一行（欢迎信息） */
	.welcome {
		font-size: 30rpx;
		height: 60rpx;
		padding: 20rpx;
		color: #333;
	}

	/* 第二、四行高度 60rpx */
	.row-small {
		height: 60rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
	}

	/* 第三行（横向滚动内容） */
	/* 第三行（横向滚动内容） */
	.row-large {
		height: 200rpx;
		padding: 10rpx 20rpx;
	}

	/* scroll-view 内部的滚动容器，确保子元素水平排列 */
	.scroll-content {
		display: flex;
		flex-direction: row;
		white-space: nowrap;
	}

	/* 第三行的子元素样式 */
	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 120rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		margin-right: 20rpx;
	}

	/* 第五行（单列布局） */
	.row-auto {
		display: flex;
		flex-direction: column;
		/* 纵向排列 */
		align-items: center;
		/* 居中 */
		gap: 20rpx;
		/* 图片之间的间隔 */
		padding-bottom: 20rpx;
	}

	/* 每个图片项的容器 */
	.item-box {
		width: 100%;
		/* 让图片稍微小于屏幕宽度 */
		max-width: 700rpx;
		/* 控制最大宽度 */
		height: 360rpx;
		/* 固定高度 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 图片容器 */
	.item-image {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		overflow: hidden;
	}

	/* 图片 */
	.banner {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
	}

	.item-title-s {
		color: $text-font-color-2;
		font-size: 12px;
	}

	/* 左上角的标题 */
	.item-title {
		position: absolute;
		top: 20rpx;
		left: 10rpx;
		font-size: 26rpx;
		color: #fff;
		background: rgba(0, 0, 0, 0.4);
		padding: 12rpx 12rpx;
		border-radius: 10rpx;
	}

	/* 底部半透明蒙版 */
	.text-overlay {
		position: absolute;
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
		padding: 10rpx 0;
		text-align: center;
	}

	/* 蒙版内的文字 */
	.item-text {
		font-size: 24rpx;
		color: #fff;
	}
</style>